<template>
<view class="container">
	<view class="list-card padding-all detail-white">
		<image class="list-card-cover border-radius"
			src="/static/v2_qb8b4c.png"
			mode="aspectFill"
			@click="onItemClick('profile', { id: 1 })" />
		<view class="list-card-content sec-left">
			<view class="list-card-header">
				<view class="list-card-info">
					<view class="list-card-title">你可以叫小王吗？</view>
					<view class="list-card-time">2020-11-11 20:11:22</view>
				</view>
				<view class="btn btn-primary"
					@click="onItemClick('focuson', { id: 1 })">
					<text>关注</text>
				</view>
			</view>
			<view class="list-card-body sec-top">
				Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
			</view>
		</view>
	</view>
	<view class="section-header detail-white">
		<view class="section-title">评论</view>
		<text class="iconfont icon-filter"
			style="font-size: 18px;color: #999999;"
			@click="onItemClick('sort')"></text>
	</view>
	<view class="list-card padding sec-top">
		<image class="list-card-cover border-radius"
			src="/static/v2_qb8b4c.png"
			mode="aspectFill"
			@click="onItemClick('profile', { id: 1 })" />
		<view class="list-card-content sec-left">
			<view class="list-card-header">
				<view class="list-card-title">你可以叫小王吗？</view>
				<view class="list-card-time">2020-11-11 20:11:22</view>
			</view>
			<view class="list-card-body">
				Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
			</view>
			<view class="list-card-footer">
				<view class="list-action-item"
					@click.stop="onItemClick('forward', { id: 1 })">
					<text class="iconfont icon-forward"></text>
					<text class="sec-left">1</text>
				</view>
				<view class="list-action-item"
					@click.stop="onItemClick('comment', { id: 1 })">
					<text class="iconfont icon-comment"></text>
					<text class="sec-left">1</text>
				</view>
				<view class="list-action-item"
					@click.stop="onItemClick('collect', { id: 1 })">
					<text class="iconfont icon-collect"></text>
					<text class="sec-left">1</text>
				</view>
				<view class="list-action-item"
					@click.stop="onItemClick('help', { id: 1 })">
					<text class="iconfont icon-help"></text>
					<text class="sec-left">1</text>
				</view>
			</view>
		</view>
	</view>
	<view class="list-card padding sec-top">
		<image class="list-card-cover border-radius"
			src="/static/v2_qb8b4c.png"
			mode="aspectFill"
			@click="onItemClick('profile', { id: 1 })" />
		<view class="list-card-content sec-left">
			<view class="list-card-header">
				<view class="list-card-title">你可以叫小王吗？</view>
				<view class="list-card-time">2020-11-11 20:11:22</view>
			</view>
			<view class="list-card-body">
				Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
			</view>
			<view class="list-card-footer">
				<view class="list-action-item"
					@click.stop="onItemClick('forward', { id: 1 })">
					<text class="iconfont icon-forward"></text>
					<text class="sec-left">1</text>
				</view>
				<view class="list-action-item"
					@click.stop="onItemClick('comment', { id: 1 })">
					<text class="iconfont icon-comment"></text>
					<text class="sec-left">1</text>
				</view>
				<view class="list-action-item"
					@click.stop="onItemClick('collect', { id: 1 })">
					<text class="iconfont icon-collect"></text>
					<text class="sec-left">1</text>
				</view>
				<view class="list-action-item"
					@click.stop="onItemClick('help', { id: 1 })">
					<text class="iconfont icon-help"></text>
					<text class="sec-left">1</text>
				</view>
			</view>
			<view class="list-card-slot">
				<view class="list-slot-item">
					<text class="list-slot-name">小王</text>:
					<text class="sec-left">如何做好一个Hybird App？</text>
				</view>
				<view class="list-slot-item">
					<text class="list-slot-name">老师</text>
					<text class="sec-left">回复</text>
					<text class="list-slot-name sec-left">小王</text>:
					<text class="sec-left">Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 底部操作 -->
	<view class="shim"></view>
	<view class="fixed-action bottom">
		<view class="fixed-action-item">
			<view class="btn btn-primary large"
				@click="onItemClick('publish')">
				<text class="iconfont icon-edit"></text>
				<text class="sec-left">添加评论</text>
			</view>
		</view>
		<view class="fixed-action-item text-custom"
			@click="onItemClick('forward')">
			<text class="iconfont icon-forward"></text>
			<text class="sec-left">1</text>
		</view>
		<view class="fixed-action-item text-custom"
			@click="onItemClick('comment')">
			<text class="iconfont icon-comment"></text>
			<text class="sec-left">1</text>
		</view>
		<view class="fixed-action-item text-custom"
			@click="onItemClick('collect')">
			<text class="iconfont icon-collect"></text>
			<text class="sec-left">1</text>
		</view>
	</view>
	<!-- 发图文	 -->
	<uni-popup id="popup" ref="popup" type="bottom" :animation="true">
		<view class="publish-pop">
			<view class="publish-header">
				<text class="iconfont icon-close" @click="onClose"></text>
				<text class="publish-text" @click="onPublish">发布</text>
			</view>
			<view class="publish-body">
				<textarea class="publish-textarea"
					:maxlength="-1"
					:focus="true"
					placeholder="请输入解答内容" />
			</view>
			<view class="publish-image-area">
				<uni-grid :column="3"
					:showBorder="false">
					<block>
						<uni-grid-item class="publish-image-item">
							<view class="border-dashed"
								@click="onUpload">
								<uni-icons size="48" type="plusempty" color="#cccccc" />
							</view>
						</uni-grid-item>
					</block>
				</uni-grid>
			</view>
		</view>
	</uni-popup>
</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
	},
	methods: {
		onUpload() {
			uni.chooseImage({
				count: 9,
				success: (res) => {
					console.log('res: ', res);
				},
				fail: (err) => {
					
				},
				complete: (res) => {
					
				}
			});
		},
		onPublish() {
			this.onClose();
		},
		onClose() {
			this.$refs.popup.close();
		},
		onItemClick(type, item) {
			switch(type) {
				case 'profile':
					uni.navigateTo({
						url: `/pages/${ type }/${ type }?id=${ item.id }&from=faq`
					});
					break;
				case 'forward':
					break;
				case 'comment':
					break;
				case 'collect':
					break;
				case 'publish':
					this.$refs.popup.open();
					break;
				case 'focuson':
					break;
				case 'sort':
					break;
				default:
					uni.navigateTo({
						url: `/pages/faq/${ type }?id=${ item.id }&from=faq`
					});
					break;
			}
		}
	}
}
</script>
